<template>
	<view>
		<view class="bg" :style="{height:BarTop + BarHeight + 11 + 'px'}"></view>
		<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}">
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/back.png" mode="" class="order-nav-img" @click="backNav"></image>
			<view class="search">
				<u-search 
				placeholder="搜索商家名称" 
				bg-color='#F9FFFD' 
				:clearabled='false' 
				v-model="obj.search" 
				:show-action='false'
				border-color='#F16325'
				@search="Search"
				></u-search>
				<view class="searchbtn" @click.stop="Search()">
					搜索
				</view>
			</view>
		</view>
		<view class="sort" :style="{marginTop:BarTop + BarHeight + 5 + 'px'}">
			<u-dropdown ref="uDropdown">
				<u-dropdown-item v-model="value1" :title="title1" :options="options1" @change='change'></u-dropdown-item>
				<u-dropdown-item v-model="value2" :title="title2" :options="options2" @change='change1'></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="筛选" >
					<view class="slot-content" style="background-color: #FFFFFF;">
						<view class="value3">
							<view class="val-title">
								附近
							</view>
							<view class="valtitle-box">
								<view class="flexbox" 
								:style="{'backgroundColor':distance == 1?'#3CCE74':'','color':distance==1?'white':''}" 
								@click="distanceS(1)">
									1km内
								</view>
								<view class="flexbox" 
								:style="{'backgroundColor':distance == 2?'#3CCE74':'','color':distance==2?'white':''}" 
								@click="distanceS(2)">
									2km内
								</view>
								<view class="flexbox" 
								:style="{'backgroundColor':distance == 3?'#3CCE74':'','color':distance==3?'white':''}" 
								@click="distanceS(3)">
									3km内
								</view>
								<view class="flexbox" 
								:style="{'backgroundColor':distance == 5?'#3CCE74':'','color':distance==5?'white':''}" 
								@click="distanceS(5)">
									5km内
								</view>
							</view>
						</view>
						<view class="value3" style="margin-top: 30rpx;">
							<view class="val-title">
								商家
							</view>
							<view class="valtitle-box">
								<view class="flexbox" 
								:style="{'backgroundColor':shopflag == 1?'#3CCE74':'','color':shopflag==1?'white':''}" 
								@click="shop(1)">
									新商家
								</view>
								<view class="flexbox"
								:style="{'backgroundColor':shopflag == 2?'#3CCE74':'','color':shopflag==2?'white':''}" 
								@click="shop(2)">
									优选商家
								</view>
								<view class="flexbox" style="background-color: white;"></view>
								<view class="flexbox" style="background-color: white;"></view>
							</view>
						</view>
						<view class="value3" style="margin-top: 30rpx;">
							<view class="val-title">
								品质
							</view>
							<view class="valtitle-box">
								<view class="flexbox" 
								:style="{'backgroundColor':starflag == 5?'#3CCE74':'','color':starflag==5?'white':''}" 
								@click="star(5)">
									5星好评
								</view>
								<view class="flexbox" 
								:style="{'backgroundColor':starflag == 4?'#3CCE74':'','color':starflag==4?'white':''}" 
								@click="star(4)">
									4星以上
								</view>
								<view class="flexbox" 
								:style="{'backgroundColor':starflag == 3?'#3CCE74':'','color':starflag==3?'white':''}" 
								@click="star(3)">
									点评高分
								</view>
								<view class="flexbox" style="background-color: white;"></view>
							</view>
						</view>
						<view class="sxbtn">
							<view class="btn1" @click="reset">
								重置
							</view>
							<view class="btn2" @click="finish">
								完成
							</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		
		<view class="recommend-list box-card box-card-new"  v-if="lists && lists.length > 0">
			<view class="shop-list">
				<view class="shop-item"  v-for="(item,index) in lists" :key="item.id" @click="Gotoinfo(item.id)">
					<image class="shop-item-img"  :src="item.image"></image>
					<view class="shop-item-info">
						<text class="shop-item-title text-1-row">{{item.title}}</text>
						<view class="shop-item-info-row">
							<view class="star">
								<image 
								  v-for="(n, index) in item.fullStars" 
								  :key="index" 
								  src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/xzpf.png" 
								  mode="widthFix" 
								  style="width: 24rpx; height: 24rpx;">
								</image>
								<image 
								  v-if="item.hasHalfStar" 
								  :key="index" 
								  src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/ybpf.png" 
								  mode="widthFix" 
								  style="width: 24rpx; height: 24rpx;">
								</image>
								<image 
								  v-for="(n, index) in item.emptyStars" 
								  :key="index" 
								  src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/wzpf.png" 
								  mode="widthFix" 
								  style="width: 24rpx; height: 24rpx;">
								</image>
								<view class="pfsp">
									{{item.star}}
								</view>
							</view>
							<text class="shop-item-info-distance" v-if="item.distance">{{item.distance}}km</text>
						</view>
						<text class="shop-item-address text-1-row">{{item.address}}</text>
						<view class="quan">
							<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/quan.png" mode="" style="width: 100%;height: 100%;"></image>
							<view class="quansp">
								{{item.quan_money}}
							</view>
						</view>
					</view> 
				</view>
			</view>
		</view> 
		<u-loadmore :status="status" style="width: 100%;text-align: center;"/>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BarTop:'',
				BarHeight:'',
				distance:'',
				shopflag:'',
				lists:'',
				starflag:'',
				title1:'综合排序',
				title2:'附近1km',
				value1:'',
				value2:'',
				value3:'',
				options1:[
					{
						label: '综合排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '评分优先',
						value: 3,
					}
				],
				options2:[
					{
						label: '1km内',
						value: 1,
					},
					{
						label: '2km内',
						value: 2,
					},
					{
						label: '3km内',
						value: 3,
					},
					{
						label: '5km内',
						value: 5,
					},
				],
				sort: '',
				page: 1,
				pagesize: 10,
				status: 'loadmore',
				obj:{
					search:'',
				},
				location:{},
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
			// #endif
			
			// 联盟店铺、附近商家
			let that = this
			// this.getStoreList()
			this.$refs.uDropdown.highlight(0);
		},
		onShow() {
			let location = {}
			let that = this
			// #ifdef WEB
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						location={
							lng:res?.longitude,
							lat:res?.latitude
						}
						that.location = location
						that.getStoreList(location)
					},
					fail: function (e){
						that.address = "位置获取失败..."
					},
				});
			// #endif
			// #ifdef MP-WEIXIN
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						location={
							lng:res?.longitude,
							lat:res?.latitude
						}
						that.location = location
						that.getStoreList()
					},
					fail: function (e){
						that.address = "位置获取失败..."
						uni.showModal({
						    title: '提示',
						    content: '此功能需要获取您的位置信息，请确认授权',
							success: function (modalRes) {
								if (modalRes.confirm) {
									// 引导用户去设置中开启位置服务
									uni.openSetting();
								}
							}
						});  
					},
				});
			// #endif
		},
		onReachBottom() {
			this.status = 'loading';
			this.page++;
			this.getStoreList()
		},
		methods:{
			distanceS(item){
				this.distance = item
			},
			shop(item){
				this.shopflag = item
			},
			star(item){
				this.starflag = item
			},
			finish(){
				let obj = {
					distance:this.distance,
					shop:this.shopflag,
					star:this.starflag
				}
				
				this.$refs.uDropdown.close();
			},
			reset(){
				this.distance = ''
				this.shopflag = ''
				this.starflag = ''
			},
			change(value){
				const matchedOption = this.options1.find(option => option.value === value);
				this.title1 = matchedOption.label
				this.title2 = '距离'
				this.$refs.uDropdown.highlight(0);
				
				// 排序规则
				this.sort = '1-'+value;
				this.page = 1;
				this.lists = []
				this.getStoreList()
			},
			change1(value){
				const matchedOption = this.options2.find(option => option.value === value);
				this.title2 = matchedOption.label
				
				this.title1 = '综合排序'
				this.$refs.uDropdown.highlight(1);
				
				// 排序规则
				this.sort = '2-'+value;
				this.page = 1;
				this.lists = []
				this.getStoreList()
			},
			getStoreList(){
				let that = this
				let params = {
					sort: that.sort,
					page: that.page,
					pagesize: that.pagesize,
					lng: that.location.lng,
					lat: that.location.lat,
					search: this.obj.search
				}
				that.$u.api.index.getStoreList(params).then(res =>{
					if(res.code == 200){
						that.lists = [...that.lists,...res.data]
						if(res.data.length == 0){
							that.status = 'nomore'
						}
						that.lists.forEach(shop => {
							shop.fullStars = Math.floor(shop.star);
							shop.hasHalfStar = (shop.star % 1) >= 0.1;
							shop.emptyStars = 5 - shop.fullStars - (shop.hasHalfStar ? 1 : 0);
						});
					}
				})
			},
			Search(obj){
				if(this.obj.search==''){
					uni.showToast({
						icon: 'none',
						title: '请输入搜索内容'
					})
					return
				}
				this.lists = []
				this.getStoreList()
			},
			backNav(){
				uni.navigateBack({
				    delta: 1,
				})
			},
			Gotoinfo(id){
				uni.navigateTo({
					url:`../shop/detail?id=${id}`
				})
			},
		},
		
	}
</script>

<style>
	page{
		background-color: white;
	}
	.bg{
		width: 100%;
		z-index: 10;
		background-color: white;
		position: fixed;
		top: 0;
	}
	.order-nav{width: 100%;position: fixed;top:0;color: black;z-index: 999;display: flex;background-color: white;}
	.order-nav-img{width: 40rpx;height: 40rpx;position: absolute;left: 0rpx;padding: 15rpx;z-index: 999;}
	.search{
		width: 442rpx;
		height: 100%;
		position: absolute;
		left: 74rpx;
	}
	.searchbtn{
		width: 102rpx;
		height: 52rpx;
		background-color: #F16325;
		border-radius: 24rpx;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
		text-align: center;
		line-height: 52rpx;
		color: white;
		font-size: 24rpx;
		z-index: 999;
	}
	.sort{
		width: 750rpx;
		height: 40rpx;
		margin-top: 25rpx;
		/* position: relative; */
	}
	.value3{
		width: 690rpx;
		margin-left: 30rpx;
	}
	.val-title{
		font-size: 28rpx;
		color: rgba(61, 61, 61, 1);
		font-weight: bold;
	}
	.valtitle-box{
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: space-between;
	}
	.flexbox{
		width: 160rpx;
		height: 64rpx;
		background-color: rgba(246, 246, 246, 1);
		border-radius: 8rpx;
		font-size: 24rpx;
		color: rgba(84, 84, 84, 1);
		text-align: center;
		line-height: 64rpx;
	}
	.sxbtn{
		width: 100%;
		height: 92rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
	}
	.btn1{
		width: 334rpx;
		height: 92rpx;
		text-align: center;
		line-height: 92rpx;
		color: rgba(97, 97, 97, 1);
		font-size: 32rpx;
		background-color: rgba(246, 246, 246, 1);
		border-radius: 16rpx;
	}
	.btn2{
		width: 334rpx;
		height: 92rpx;
		text-align: center;
		line-height: 92rpx;
		color: white;
		font-size: 32rpx;
		background-color: rgba(60, 206, 116, 1);
		border-radius: 16rpx;
	}
	.recommend-list{background-color: unset;box-shadow: unset;padding:20rpx 0rpx}
	.box-card-new{width: 704rpx;background: #FFFFFF;border-radius: 16rpx 16rpx 16rpx 16rpx;margin-top:30rpx;padding: 20rpx;margin-bottom: 16rpx;}
	.shop-list{ margin-top:20rpx;}
	.shop-item{ margin-bottom: 20rpx;background-color: white;padding:20rpx;border-radius: 15rpx;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #EEEEEE;border-radius: unset;}
	.shop-item-img{ display: block;width: 176rpx;height: 176rpx;border-radius: 15rpx;flex-shrink: 0;}
	.shop-item-info{display: flex;flex-direction: column;flex:1;margin-left: 20rpx;}
	.shop-item-info-row{display: flex;align-items: center;justify-content: space-between;}
	.shop-item-title{margin-bottom: 10rpx;color:#333;font-weight: bold;}
	.shop-item-info-distance{font-size: 24rpx;}
	.shop-item-address{margin-top:14rpx;font-size: 24rpx;}
	.pfsp{
		height: 24rpx;
		line-height: 24rpx;
		color: #36BE6A;
	}
	.quan{
		width: 182rpx;
		height: 36rpx;
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #FF6E41;
		text-align: right;
		line-height: 36rpx;
		position: relative;
		
	}
	.quansp{
		position: absolute;
		top:0;
		right: 2rpx;
		
	}
	
	.star{width: 180rpx;height: 24rpx;display: flex;justify-content: space-between;}
</style>